<template>
  <view class="seckill">
    <view class="list grid col-2">
      <view class="item" v-for="(activity,i) in list" :key="i" @click="handleActivityClick(activity)">
        <view class="label" :class="'type'+activity.goodsType">
          <text v-if="activity.goodsType == 1">服务</text>
          <text v-else>商品</text>
        </view>
        <view class="item-warapper">
          <image :src="activity.cover" class="cover"></image>
          <view class="item-content">
            <view class="title text-cut2">{{ activity.goodsName }}</view>
            <view class="money">
              <text>￥{{ activity.price }}</text>
              <text class="gray">￥{{ activity.linePrice }}</text>
            </view>
            <view class="sku m">
              <text>仅剩</text>
              <text class="light">{{ activity.sku }}</text>
            </view>
            <view class="tags m">
              <text class="btn">秒杀</text>
              <!--<text class="tag">每周精选</text>-->
            </view>
          </view>
        </view>

      </view>
    </view>

    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!list || list.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>
  </view>
</template>

<script>
import Starts from "@/components/stars";
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  components: {Starts, ListLoadOver, ListEmpty, ListLoading},
  name: "more-activity",
  data() {
    return {
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.refresh()
  },
  onPullDownRefresh() {
    this.refresh()
  },
  onReachBottom() {
    this.getList();
  },
  methods: {
    refresh() {
      this.clear();
      this.getList();
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getMsList(++this.page).then(res => {
        this.list.push(...res);
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },

    handleActivityClick(activity) {
      uni.navigateTo({url: `/pages/shop/goods/detail?type=1&id=${activity.id}`})
    },
  },
}
</script>

<style scoped lang='scss'>

.list {
  padding: r(12px);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: white;
  display: flex;
  width: 100%;

  .item {
    padding: r(12px);
    position: relative;

    .label {
      position: absolute;
      left: r(6px);
      top: r(6px);
      z-index: 1;
      color: white;
      border-radius: r(20px 0);
      padding: r(5px 20px);

      &.type1{
        background-color: #E73832;
      }
      &.type2{
        background-color: $primary-color;
      }
    }

    .item-warapper {
      background-color: white;
      border-radius: r(10px);
      overflow: hidden;

      .item-content {
        padding: r(20px);
      }

    }

    .cover {
      width: 100%;
      height: r(350px);
    }

    .title {
      word-break: break-all;
      font-size: r(26px);
      color: #333333;
    }

    .info {
      width: 100%;
      display: flex;
      margin: r(20px 0);

      .avatar {
        flex-shrink: 0;
        height: r(47px);
        width: r(47px);
        border-radius: 50%;
        margin-right: r(10px);
      }

      .info-content {
        flex: 1;
        width: calc(100% - #{ r(57px)});

        .name {
          width: 100%;
          font-size: r(24px);
          color: #333333;
        }
      }
    }

    .money {
      font-size: r(24px);
      color: #E73832;
      margin: r(10px 0);

      .gray {
        text-decoration: line-through;
        color: #909090;
      }
    }

    .tags {
      display: flex;

      .tag {
        border: 1px solid #FF7671;
        border-radius: r(4px);
        color: #E73832;
        font-size: r(20px);
        padding: r(2px 6px);
        margin-left: r(10px);
        margin-top: r(20px);
      }
    }

  }
}

.seckill {
  .list {
    background: transparent;

    .item {
      padding-bottom: r(10px);
      border-radius: r(10px);
      overflow: hidden;

      .m {
        margin-right: r(10px);
        margin-left: r(10px);
      }

      .sku {
        color: #232323;
        font-size: r(22px);

        .light {
          margin-left: r(10px);
          color: #d72a2c;
        }
      }

      .tags {
        display: flex;
        justify-content: flex-end;

        .btn {
          color: white;
          border-radius: r(30px);
          background-color: #d72a2c;
          padding: r(5px 16px);
          font-size: r(22px);
        }

      }
    }
  }

}
</style>